<template>
    <div>
        <list title="商品列表" v-if="showNav"/>
        <!-- 商品排序栏 -->
        <div class="filter-bar" :style="{top}">
            <div :class="['sale', 'filter', {
                active:order.by === 'sale'
            } ]"
                @click="bySale"
            >
                <span class="text">销量</span>
                <!-- 上三角 -->
                <div :class="['angile', 'up', {
                    active: order.by === 'sale' && order.updown === 1
                }] "></div>
                <!-- 下三角 -->
                <div :class="['angile', 'down', {
                    active: order.by === 'sale' && order.updown === 0
                }] "></div>
            </div>
            <div class="gang"></div>
             <div :class="['price', 'filter', {
                active:order.by === 'price'
            } ]"
                @click="baSales"
            >
                <span class="text">价格</span>
                <!-- 上三角 -->
                <div :class="['angile', 'up', {
                    active: order.by === 'price' && order.updown === 1
                }] "></div>
                <!-- 下三角 -->
                <div :class="['angile', 'down', {
                    active: order.by === 'price' && order.updown === 0
                }] "></div>
            </div>
        </div>
        <!-- /商品排序栏  -->
        <!-- 商品列表 -->
            <div class="wrap">
                <van-card
                    v-for="i in items"
                    :key="i.id"
                    num="2"
                    :price="i.minPrice"
                    :title="i.name"
                    :thumb="i.pic"
                    >
                    <template #tags>
                        <van-tag plain type="danger">{{i.statusStr}}</van-tag>
                        <van-tag plain type="danger">标签</van-tag>
                    </template>
                    <template #footer>
                        <van-button size="mini">按钮</van-button>
                        <van-button size="mini">按钮</van-button>
                    </template>
                </van-card>
            </div>
        <!-- /商品列表 -->
    </div>
</template>
<script>
import list from '@views/Home/component/ItemListHead'
import { RequestList } from '@api'
export default {
  data () {
    return {
      top: '45px',
      showNav: true,
      order: {
        by: 'sale', // sale按升序排序 price按价格排序
        updown: 0 // 1升序 0降序
      },
      items: [],
      // 请求商品排序规则
      orderBy: 'ordersDown '
    }
  },
  mounted () {
    this.navScroll()
  },
  created () {
    this.requestList()
  },
  methods: {
    requestList () {
      RequestList({
        K: this.$route.query.word,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data
        //   console.log(this.items)
        }
      })
    },
    navScroll () {
      // 控制滚动条滚动 时导航
      window.onscroll = () => {
        const sTop = document.documentElement.scrollTop || document.body.scrollTop
        if (sTop > 45) {
          this.showNav = false
          this.top = 0
        } else {
          this.showNav = true
          this.top = '45px'
        }
      }
    },
    baSales () {
      if (this.order.by === 'sale') {
        this.order.by = 'price'
        this.order.updown = 1
        this.orderBy = 'priceUp '
      } else {
        // 情况2 此时就是按销量排序 切换升序降序排列
        if (this.order.updown === 0) {
          this.order.updown = 1
          this.orderBy = 'priceUp '
        } else {
          this.order.updown = 0
          this.orderBy = 'priceDown  '
        }
      }
      this.requestList()
    },
    bySale () {
      // 按照销量排序
      // 情况1 此时按价格排序 点击按销量
      /*
        默认按销量的 降序排序
      */
      if (this.order.by === 'price') {
        this.order.by = 'sale'
        this.order.updown = 0
        this.orderBy = 'ordersDown '
      } else {
        // 情况2 此时就是按销量排序 切换升序降序排列
        if (this.order.updown === 0) {
          this.order.updown = 1
          this.orderBy = 'ordersUp'
        } else {
          this.order.updown = 0
          this.orderBy = 'ordersDown '
        }
      }
      this.requestList()
    }
  },
  components: {
    list
  },
  beforeDestroy () {
    window.onscroll = null
  }
}
</script>

<style lang='scss'>
.filter-bar{
    position: fixed;
    z-index: 10;
    height: 40px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .gang{
        width: 1px;
        height: 25px;
        background-color: #000;
    }
    .filter{
        &.active{
            color: red;
        }
        position: relative;
        .angile{
            width: 0;
            height: 0;
            border: 6px solid transparent;
            position: absolute;
            left: 40px;
            &.up{
                border-bottom-color:#000;
                position: absolute;
                bottom: 11px;
                &.active{
                    border-bottom-color:red;
                }
            }
            &.down{
                border-top-color:#000;
                bottom: -4px;
                 &.active{
                    border-top-color:red;
                }
            }
        }
    }
}
.wrap{
    margin-top: 86px;
    .van-card__title{
        width: 180px;
    }
}
</style>
